<template>
  <div>
  	<mt-header title="谋略家-炒股人的家" :fixed="true"></mt-header>
    <v-Content>
      <div class="informationTop">	
        <span class="accountBalance">
         		<span>账户余额(元)</span> 
          <img :src="imgUrl" alt="" @click="show" >
        </span>
        <br>
        <span class="accountMoney" v-if="flag">
          {{money}}
        </span>
        <span v-else="flag"  class="accountMoney top">
          ******
        </span>
        <div class="accountButtons">
          <span style="margin-right: 0.7rem;" :class="{'active':isActive}" @click="toRecharge">充值</span>
          <span :class="{'active':!isActive}" @click="toWithdrawals">提现</span>
        </div>
      </div>
      
      <v-chart></v-chart>
      
      
      <div class="wrapOptional" style="border:none">
        <v-IconRightArrowList :item='Invitationcode' @toNext='myInviteCode'></v-IconRightArrowList>
      </div>
      <div class="wrapOptional">
        <v-IconRightArrowList :item='Accountinformation' @toNext='toAccountinformation'></v-IconRightArrowList>
      </div>
      <div>
        <v-IconRightArrowList :item='Funddetails' @toNext='toFunddetails'></v-IconRightArrowList>
      </div>
      <div class="wrapOptional">
        <v-IconRightArrowList :item='Notices' @toNext='toNotices'></v-IconRightArrowList>
      </div>
      <v-IconRightArrowList :item='ServiceCenter' @toNext='toServiceCenter'></v-IconRightArrowList>
      <div class="marginBot">
      	<v-IconRightArrowList :item='Guide' @toNext='toGuide'></v-IconRightArrowList>
    	</div>
    </v-Content>
    <v-Footer></v-Footer>
  </div>
</template>
<script>
import Content from '@/components/ContentCenter'
import Footer from '@/components/Footer'
import IconRightArrowList from '@/components/IconRightArrowList'
import chart from '@/components/my/chart'
import my from '@/api/my/index'
import { toast,getCookie } from '@/util/index'
import { Header,MessageBox } from 'mint-ui'
export default {
  data() {
    return {
    	name:"谋略家-炒股人的家",
    	money:0,
      isActive: false,
      flag:true,
      imgUrl:require("../../assets/account_icon_show.png"),
      Invitationcode: {
        src: require("../../assets/mine_icon_yqm.png"),
        text: '我的邀请码',
        tips: ''
      },
      Accountinformation: {
        src: require('../../assets/mine_icon_account.png'),
        text: '账户信息',
        tips: ''
      },
      Funddetails: {
        src: require('../../assets/mine_icon_fund details.png'),
        text: '资金明细',
        tips: ''
      },
      Notices: {
        src: require('../../assets/account_icon_news@2x.png'),
        text: '公告信息',
        tips: ''
      },
      ServiceCenter: {
        src: require('../../assets/account_icon_service@2x.png'),
        text: '客服中心',
        tips: ''
      },
     
      Guide: {
        src: require('../../assets/account_icon_novice@2x.png'),
        text: '新手指导',
        tips: ''
      },
      auth:""
    }
  },
  components: {
    'v-Footer': Footer,
    'v-Content': Content,
    'v-IconRightArrowList': IconRightArrowList,
    'v-chart':chart,
    "mt-header":Header,
  },
  
  methods: {
  	show(){
  		if(!this.flag){
  			this.imgUrl=require("../../assets/account_icon_show.png");
  		}else{
  			this.imgUrl=require('../../assets/account_icon_hide.png');
  		}
  		 this.flag=!this.flag;
  	},
    toRecharge(event) {
    	if(this.auth!=2){
    			MessageBox.confirm('请先实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
					})
    	}else{
    		this.$router.push({path:'/toRecharge'})
    		
    	}
    	
      
    },
    toWithdrawals() {
    	if(this.auth!=2){
    			MessageBox.confirm('请先实名认证',"").then(()=> {
				  	this.$router.push({path:'/realnameInfo'})
					})
    	}else{
	     		 this.$router.push({path:'/toWithdrawals'})
	    }
    },
    myInviteCode(){
    	 this.$router.push({path:'/myInviteCode'})
    },
    toAccountinformation() {
      //console.log('toAccountinformation')
      this.$router.push({path:'/toAccountinformation'})
    },
    toNotices() {
      //console.log('toNotices')
      this.$router.push({path:'/toNotices'})
    },
    toServiceCenter() {
      //console.log('toServiceCenter')
       this.$router.push({path:'/toServiceCenter'})
    },
    toFunddetails() {
      //console.log('toFunddetails')
       this.$router.push({path:'/toFunddetails'})
    },
    toGuide() {
      //console.log('toGuide')
      this.$router.push({path:'/toGuide'})
    }
  },
  mounted(){
	  	let senddata = {
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
		
			my.indexJson(senddata).then((res) => {
				if (res.data.code == 200) {
					//this.name=res.data.data.name;
					this.money=res.data.data.availableMoney;       
					this.auth=res.data.data.auth;
					this.$store.dispatch('saveMoney',res.data.data.availableMoney);
				}else if(res.data.code == 222) {
						MessageBox.alert('请先登录',"").then(()=> {
						 	this.$router.push({path:'/login'});
						});
						 
				} else {
						toast(res.data.message)
				}
			})
		
  },
  beforeRouteEnter(to,from,next){
    document.querySelector('title').innerText='谋略家'
      next()
  }
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.canvasTitle{
	width: 100%;
	height: 1.093333rem;
	line-height: 1.093333rem;
	text-align: center;
	color: white;
	font-size:.3733rem;
}
canvas{
	width: 100%;
	height:5.1033334rem;
}
.informationTop {
  width: 100%;
  height: 6rem;
  background: url('../../assets/account_bg@2x.png') no-repeat center center;
  background-size: 100%;
  color: @fcolor;
  font-size: 0.37333rem;
  text-align: center;
  span {
    display: inline-block;
  }
  .accountName {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  .accountBalance {
    color: #bdbec1;
    margin-bottom: 0.58667rem;
    margin-top:1.2rem;
    img {
      width: @fsize*2;
      height:@fsize*2;
      vertical-align: middle;
    }
  }
  .accountMoney {
    font-size: 0.96rem;
    margin-bottom: 0.8rem;
    height: 1.093rem;
  }
  .top{
  	 line-height: .3rem;
  }
  .accountButtons {
    span {
      width: 3.2rem;
      height: 1.06667rem;
      line-height: 1.06667rem;
      text-align: center;
      background-color: @liBg;
      border: solid 0.02667rem @actColor;
      border-radius: 0.08rem;
      color: @actColor;
    }
    .active {
     /* background-color: @actColor;
      color: #8d4006;*/
    }
  }
}
	
.wrapOptional {
  margin-top: @marginbm;
  border-bottom: solid 1px #1f232e;
}
.marginBot{
	margin-bottom: @marginbm;
	border-top: solid 1px #1f232e;
}
</style>


